<template>
  <div class="add-address">
    <!-- 头部导航 -->
    <van-nav-bar
      :title="navTitle"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- form 表单 -->
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!-- 姓名 -->
        <van-field
          v-model="realName"
          name="姓名"
          label="姓名"
          placeholder="收货人姓名"
        />
        <!-- 手机号 -->
        <van-field
          v-model="phone"
          name="手机"
          label="手机"
          placeholder="收货人手机号"
        />
        <!-- 所在地区 -->
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = true"
        />
        <van-popup v-model:show="show" round position="bottom">
          <!-- field-names 自定义 options 结构中的字段 -->
          <van-cascader
            v-model="area"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @finish="onFinish"
            :field-names="fieldNames"
          />
        </van-popup>
        <!-- 详细地址 -->
        <van-field
          v-model="detail"
          name="详细地址"
          label="详细地址"
          placeholder="详细地址信息"
        />
      </van-cell-group>
      <!-- 设置默认地址 -->
      <van-cell-group inset>
        <van-cell center title="设置默认地址">
          <template #right-icon>
            <van-switch v-model="isDefault" />
          </template>
        </van-cell>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { getCityList, addEditAddress } from '@/api/address.js'
import { useRouter } from 'vue-router'
// 返回按钮触发的函数
const onClickLeft = () => history.back()

/* --------------- 定义响应式变量 ------------------ */
const realName = ref('') // 姓名
const phone = ref('') // 手机号
const fieldValue = ref('') // 地区选择后输入框显示的内容
const area = ref('') // 选项列表中被选中的省市区，值是省市区对应的 id，表现为勾选和高亮
const show = ref(false) // 地区菜单显示状态
const detail = ref('') // 详细地址
const isDefault = ref(false) // 是否为默认地址

// 选项列表，children 代表子选项，支持多级嵌套
const options = ref([
/*   {
    text: '浙江省',
    value: '330000',
    children: [{ text: '杭州市', value: '330100' }]
  } */
])

/* --------------- 省市区列表请求数据处理 ------------------ */
// 1.van-cascader 组件使用field-names 自定义 options 数组对象中的属性名称，目的是与响应数据的名称一致
const fieldNames = {
  text: 'n', // 省市区的名称
  value: 'v', // id
  children: 'c' // 子数组
}
// 2. 因为区下面没有数据了，需要删除 c 属性，否则会出现空白选择，所以需要对响应回来的数据进程处理
const convertData = data => {
  // 使用 forEach 循环，是对 data 属性本身的操作，map 是要返回一个新的数组，对原数组没有影响
  data.forEach(item => {
    // 找到空的 c 属性，说明 item 是区级信息，组件要求删除 c 属性
    if (item.c.length === 0) {
      delete item.c
    } else {
      // 说明是省或者市，c 属性有值，递归处理即可
      convertData(item.c)
    }
  })
  return data
}
// 3. 发送请求，获取省市区列表数据
const initCityList = async () => {
  const { data } = await getCityList()
  if (data.status !== 200) { return }
  options.value = convertData(data.data)
}
initCityList()
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
  show.value = false
  // 将选中的省市区，名称属性 n 对应的值进行拼接，然后展示在地区输入框中
  fieldValue.value = selectedOptions.map((option) => option.n).join('/')
  // 将选中的省市区信息，添加到 address
  address = {
    province: selectedOptions[0].n, // 省名称
    city: selectedOptions[1].n, // 市名称
    city_id: selectedOptions[1].v, // 市 id
    district: selectedOptions[2].n // 地区名称
  }
}

/* --------------- 发送新增或者编辑地址请求 ------------------ */
// 1. 通过 history.state 接收到上级组件传递过来的购物车参数
const cartId = history.state.cartId
// 2. 通过 history.state 接收到上级组件传递过来的需要修改的地址 id，如果没有值为 0
const addressId = history.state.addressId || 0
// 3. 根据是否收到 addressId 判断是新增地址还是编辑地址，修改头部导航显示的文字
const navTitle = computed(() => addressId ? '编辑收货地址' : '新增收货地址')
// 4. 创建 router 实例
const router = useRouter()
// 5. 存储选择好的省市区信息，发送请求时作为参数使用
let address = {}
// 6. 点击提交按钮触发的函数，根据 id 判断发送的请求时新增还是编辑
const onSubmit = async () => {
  const { data } = await addEditAddress({
    id: addressId, // id 为 0 时，表示为提交新地址；如果是其他值，表示依据当前 id 值，对已存在的地址信息进行修改
    real_name: realName.value, // 姓名
    phone: phone.value, // 电话
    address,
    detail: detail.value, // 详细地址
    is_default: isDefault.value // 是否为默认地址
  })
  if (data.status !== 200) { return }
  // 新增地址操作成功后进行路由跳转
  if (cartId) {
    // 判断接收到订单确认页面传递过来的购物车参数，就跳转到订单确认页面，并把参数传递过去，为了获取需要购买商品的列表数据
    router.push({
      name: 'order-confirm',
      state: {
        cartId
      }
    })
  } else {
    // 没有接收到参数，跳转到用户页面
    router.push({
      name: 'user'
    })
  }
}

</script>
<style lang='scss' scoped>
.add-address {
  background-color: #f2f2f2;
  height: 100%;
  .van-form {
    padding: 16px 0 5px;
    .van-cell-group {
      margin-bottom: 10px;
    }
  }
}
</style>
